<template>
  <LeftNav class="left-nav" :navList="navList" :pageRouter="pageRouter"></LeftNav>
  <HeadNav class="head-nav" :userInfo="userInfo" :userLogOut="userLogOut"></HeadNav>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <div class="box">
    <router-view></router-view>
  </div>
  

    <!-- 退出弹框 -->
    <el-dialog
    v-model="centerDialogVisible"
    title="系统提示"
    width="30%"
    align-center
  >
    <span>确定退出吗?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="userLogOut(true)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import LeftNav from '@/components/LeftNav.vue';
import HeadNav from '@/components/HeadNav.vue';
// 弹框
import { ref } from 'vue'
import {userLogOut } from '@/api/home'
export default {
    name:"PageHome",
    data(){
      return{
        //控制弹框显示
        centerDialogVisible:ref(false),
        userInfo:{},
        navList:[
          {name:"主页",icon:"icon-shouye",url:"/"},
          {name:"用户管理",icon:"icon-yonghu",url:"/users_manage"},
          {name:"医师管理",icon:"icon-yishengyishengjieshao",url:"/doctor_manage"},
          {name:"健康知识文章管理",icon:"icon-16",url:"/article_manage"},
          // {name:"挂号记录管理",icon:"icon-yuyueguahaomianxing",url:"/record_manage"},
          {name:"评论管理",icon:"icon-tianchongxing-",url:"/comment_manage"},
          {name:"就诊人管理",icon:"icon-jiuzhenrenguanli",url:"/patient_manage"},
          {name:"预约管理",icon:"icon-yuyue",url:"/reservation_manage"},
          {name:"服务类型管理",icon:"icon-fuwuleixing",url:"/requirement_manage"},
        ]
      }
    },
    methods:{
      pageRouter(url,query={},restful={}){
        //如果带参 JSON.stringify转字符串
        if(JSON.stringify(query) != "{}"){
          //带参路由
          this.$router.push({
              path:url,
              query:query
          }); 
        }else if(JSON.stringify(restful) != "{}"){
          this.$router.push(`${url}/${restful.type}/${restful.id}`);
        }else{
          //修改url的hash
          this.$router.push(url);
        }
      },
      userLogOut(isOut = false){//退出登录
        if(isOut == true){
            userLogOut().then(
              response=>{
                if(response.code == 200){
                  //删除token
                  localStorage.removeItem('token');
                  //修改全局登录状态
                  this.$store.commit('logOut');
                }
                console.log(response);
              }
            )
        }else{
          //弹出弹框
          this.centerDialogVisible = true;
        }
      },
    },
    mounted(){
      // getUserInfo().then(
      //   response =>{
      //     console.log(response);
      //     this.userInfo = response.data;
      //   }
      // )
    },
    components:{
      LeftNav,
      HeadNav
    }
}
</script>

<style scoped>
.left-nav{
  float: left;
}
.head-nav{
  float: left;
}
.secondary-page{
  float: left;
}
.box{
  width: calc(100% - 220px);
  height: calc(100vh - 50px);
  float: left;
}
</style>